<script>
import api from '@/api'

export default {
  name: 'joinHistory',
  data() {
    return {
      tabPosition: 0,
      page: 1,
      lastPage: 1,
      data: [],
      isLoading: false,
    }
  },
  watch: {
    tabPosition: {
      handler(newVal) {
        this.onRefresh()
      },
      immediate: true,
    },
  },
  onLoad() {
    // this.getData()
  },
  methods: {
    async getData() {
      await uni.showLoading()
      try {
        // 获取中奖记录
        let result
        if (this.tabPosition === 0) {
          result = await api.welfareHouses.winning({
            page: this.page,
            /*user_id: 13145,*/
          })
        } else {
          result = await api.welfareHouses.joinHistory({
            page: this.page,
          })
        }
        if (result.code !== 200) throw new Error(result.msg)
        this.lastPage = result.data.last_page
        if (this.page === 1) {
          this.data = result.data.data
        } else {
          this.data.push(...result.data.data)
        }
      } catch (e) {
        await uni.showToast({ icon: 'none', title: e.message })
      } finally {
        this.isLoading = false
        await uni.hideLoading()
      }
    },
    onRefresh() {
      this.page = 1
      this.lastPage = 1
      this.data = []

      if (!this.isLoading) {

        this.isLoading = true
        this.getData()
      }
    },
    onLoadMore() {
      if (this.page >= this.lastPage) {
        return
      }
      this.page++
      this.getData()
    },
    openHouse(id) {
      this.header('/pages/welfare/detail?id=' + id, 1, true)
    },
    goBoxCabinets() {
      uni.switchTab({
        url: '/pages/box/index',
      })
    },
  },
}
</script>

<template>
  <view class="join-history-layout">
    <my-header title="参与记录" background-color="transparent"></my-header>
    <my-content class="content">
      <my-welfare-tab class="welfare-tab" v-model="tabPosition" :tab-list="['我的中赏', '我的参与']"></my-welfare-tab>
      <scroll-view class="scroll-view" scroll-y="true" refresher-enabled="true" refresher-background=""
                   :refresher-triggered="isLoading" @scrolltolower="onLoadMore" @refresherrefresh="onRefresh">
        <view class="goods-list" v-show="tabPosition === 0">
          <my-goods v-for="goods in data" :key="goods.id" :goods="goods"></my-goods>
        </view>
        <view class="house-list" v-show="tabPosition === 1">
          <my-house v-for="house in data" :key="house.id" :btn-text="house.is_finish === 2 ? '已开奖': '待开奖'"
                    :house="house"
                    @btnClick="openHouse(house.weal_rooms_id)"></my-house>
        </view>
      </scroll-view>
    </my-content>
  </view>
</template>

<style scoped lang="scss">
.join-history-layout {
  background-image: url("https://www.dingxians.cn/upload/user_static/welfare/bg.png");
  background-size: 100% 100%;
  height: 100vh;

  .content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /*.welfare-tab {
    margin-top: 20rpx;
  }*/

  .scroll-view {
    flex: 1;
    overflow-y: hidden;
    width: 710rpx;
    margin: 20rpx auto 0;
    box-sizing: border-box;

    .house-list {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: space-between;
    }
  }


}
</style>